<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用jsonp获取腾讯天气信息</title>
	<link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css">
	<style type="text/css">
		.container {
			padding-top: 60px;
		}
	</style>
</head>
<body>
	<div class="container">
		<table class="table table-striped table-hover" align="center" id="box">
			
		</table>
	</div>
	<script src="/js/jsonp.js"></script>
	<script src="/js/template-web.js"></script>
	<script type="text/html" id="tpl">
		<tr>
				<th>时间</th>
				<th>温度</th>
				<th>天气</th>
				<th>风向</th>
				<th>风力</th>
		</tr>
		{{each info}}
		<tr>
			<td>{{dateFormat($value.update_time)}}</td>
			<td>{{$value.degree}}</td>
			<td>{{$value.weather}}</td>
			<td>{{$value.wind_direction}}</td>
			<td>{{$value.wind_power}}</td>
		</tr>
		{{/each}}
	</script>
	<script>
		//获取table标签
		var box = document.getElementById('box');

		function dateFormat(date){
			var year = date.substr(0,4);
			var month = date.substr(4,2);
			var day = date.substr(6,2);
			var hour = date.substr(8,2);
			var minute = date.substr(10,2);
			var seconds = date.substr(12,2);
			return year + '年' + month + '月' + day + '日' + hour + '时' + minute + '分' + seconds + '秒'
		}
		//向模板中开放外部变量
		template.defaults.imports.dateFormat = dateFormat;
		jsonp({
			url:'http://wis.qq.com/weather/common',
			data:{
				source: 'pc',
				weather_type: 'forecast_1h',
				province: '黑龙江省',
				city:'哈尔滨市'
			},
			success: function (data) {
				var html = template('tpl',{info: data.data.forecast_1h});
				box.innerHTML = html;
			  }
		})
	</script>
</body>
</html>